<template lang="pug">
  .layout
    Github
    Logo
    Search
    Sidebar
    nuxt.content
</template>

<script>
import Github from '../components/Github'
import Logo from '../components/Logo'
import Search from '../components/Search'
import Sidebar from '../components/Sidebar'
import pkg from '../package'

export default {
  components: {
    Github,
    Logo,
    Search,
    Sidebar,
  },
  head () {
    return {
      meta: [
        { hid: 'og:title', property: 'og:title', content: pkg.name },
        { hid: 'og:description', property: 'og:description', content: pkg.description },
        { hid: 'og:image', property: 'og:image', content: this.prodBaseUrl + 'apple-touch-icon.png' },
        { hid: 'og:url', property: 'og:url', content: this.prodBaseUrl },
      ],
    }
  },
  data() {
    return {
      prodBaseUrl: 'https://webgems.io/',
      showNotice: false,
    }
  },
}
</script>


<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,900');

body {
  margin: 1rem;
  background: #232331;
}

html {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  // color: #22292F;
}

a {
  color: #08e5ff;
  text-decoration: none;
  overflow-wrap: break-word;

  &:hover {
    color: #008190;
  }
}

.nuxt-link-active {
  color: white;
  text-decoration: underline;
}

h1, h2, p, ol, i, small {
  color: white;
}

h1 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.layout {
  display: grid;
  grid-template-columns: fit-content(200px) auto;
  grid-gap: 3rem;
  grid-template-areas:
    'logo search'
    'sidebar content';
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  grid-area: logo;
}

.search {
  grid-area: search;
}

.nav {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.cards {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem,auto));
  grid-gap: 1rem;
}

// Fade in title and cards and rows
.fade-title {
  &-enter {
    opacity: 0;

    &-to {
      opacity: 1;
    }

    &-active {
       transition: opacity .1s ease-in-out;
    }
  }
}

.fade-card {
  &-enter {
    opacity: 0;

    &-to {
      opacity: 1;
    }

    &-active {
       transition: opacity .1s ease-in-out;
    }
  }
}


@media (max-width: 600px) {
  .layout {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem;
    margin-top: 1rem;
    grid-template-areas:
      'logo'
      'sidebar'
      'search'
      'content';
  }
  hr {
    display: none;
  }
}

.highlighted {
  text-decoration: none;
  background-color: #08e5ff;
  color: #212121;
  padding: 0 5px;
  border-radius: .1rem;

  &:hover {
    background-color: #008190;
    color: white;
  }
}

.cookie {
  position: fixed;
  margin: 1rem;
  bottom: 0;
  left: 0;
  background-color: #232331;
  padding: 0 1rem;
  border-radius: .3rem;
  box-shadow:inset 0px 0px 0px 2px #08e5ff;
  z-index: 999;

  p {
    font-size: 12px;
    margin-left: 1.2rem;

    &::before {
      content: url('');
      width: 18px;
      height: 18px;
      display: block;
      margin-left: -1.5rem;
      margin-bottom: -1.1rem;
    }
  }

  button {
    border: none;
    margin-left: .8rem;
    cursor: pointer;
  }
}


// #232331 dark bg
// #2D3748 ligher cards
// #ff3e35 or #08e5ff links
</style>


<style lang="scss">
::-webkit {
  &-scrollbar{
    width: 5px;
    height: 5px;

    &-thumb{
      background: #08e5ff;
    }

    &-track{
      background:#232331;
    }
  }
  &-resizer,
  &-scrollbar-corner {
    background: #232331;
  }
}

</style>
